<template>
  <div id="home">
    <div class="home_title">
      <span class="_txt">首页</span>
      <span class="_icon" @click="goTo('/setting')">
        <i class="el-icon-more-outline"></i>
      </span>
    </div>
    <div style="
      position:relative;
      width:100%;
      height:50px;
    "></div>
    <div class="advCard">
      <el-carousel height="150px">
        <el-carousel-item v-for="item in advItems" :key="item.id">
          <div class="_cardBox">
            <span class="_detail" @click="goTo('/adver'+item.toPath)">
              <p>{{item.id}}</p>
              <img :src="item.img_url"/>
            </span>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="home_guide" >
      <div class="_box">
        <ul>
          <li>
            <span class="_icon" @click="goTo()">
              <svg class="icon fuli _iconSet" aria-hidden="true">
              　　<use xlink:href="#icon-054"></use>
              </svg>
              <span class="._txt">福利</span>
            </span>
          </li>
          <li>
            <span class="_icon" @click="goTo()">
              <svg class="icon drxx74 _iconSet" aria-hidden="true">
              　　<use xlink:href="#icon-drxx74"></use>
              </svg>
              <span class="._txt">风控</span>
            </span>
          </li>
          <li>
            <span class="_icon" @click="goTo()">
              <svg class="icon ICBC _iconSet" aria-hidden="true">
              　　<use xlink:href="#icon-ICBC"></use>
              </svg>
              <span class="._txt">银行</span>
            </span>
          </li>
          <li>
            <span class="_icon" @click="goTo()">
              <svg class="icon xianbanshense- _iconSet" aria-hidden="true">
              　　<use xlink:href="#icon-xianbanshense-"></use>
              </svg>
              <span class="._txt">数据</span>
            </span>
          </li>
        </ul>
      </div>
    </div>
    <div class="objCard">
      <span class="_txt">优秀项目</span>
      <span class="_button _b1" @click="beChick(1)"></span>
      <span class="_button _b2" @click="beChick(2)"></span>
      <div class="_box">
        <el-carousel :interval="4000" type="card" height="200px" indicator-position="none" arrow="never" ref="obj">
          <el-carousel-item v-for="item in objItems" :key="item.id" name="item.name">
            <div class="_cardBox">
              <span class="_detail" @click="goTo('/object'+item.toPath)">
                <img :src="item.img_url"/>
              </span>
            </div>
          </el-carousel-item>
        </el-carousel>

      </div>
    </div>
    <div class="advList">
      <div class="_box">
        <ul>
          <li v-for="item in listItems" :key="item.id">
            <div class="_cardBox" @click="goTo(item.toPath)">
              <span class="_logo">
                <img :src="item.logo" alt="">
              </span>
              <span class="_name">{{item.name}}</span>
              <span class="_info">{{item.info}}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Search from "../../components/search"
export default {
  data () {
    return {
      advItems:[
        {id:1,name:1,img_url:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1571564642&di=e65a02f09c15415a5666e6666ed5af2e&imgtype=jpg&er=1&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0190e358255fa4a84a0e282b56f846.jpg',toPath:''},
        {id:2,name:2,img_url:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=365653223,2412494969&fm=15&gp=0.jpg',toPath:''},
        {id:3,name:3,img_url:'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2788834072,3980991020&fm=15&gp=0.jpg',toPath:''},
      ],
      objItems:[
        {id:1,name:1,img_url:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1570970059111&di=e660725944f3a0dd67a7c661ff547542&imgtype=0&src=http%3A%2F%2Fww1.sinaimg.cn%2Flarge%2F7a6b0359gw1er1h6zzl7vj20go0nr782.jpg',toPath:''},
        {id:2,name:2,img_url:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1570970126823&di=d63d870b88b99b796755b59ccce8be94&imgtype=0&src=http%3A%2F%2Fpic197.nipic.com%2Ffile%2F20181214%2F24598830_164433385083_2.jpg',toPath:''},
        {id:3,name:3,img_url:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2507842885,1430085017&fm=26&gp=0.jpg',toPath:''},
      ],
      listItems:[
        {
          id:1,name:'抖音 北京微播视界科技有限公司',
          info:'抖音，是一款可以拍摄短视频的音乐创意短视频社交软件，该软件于2016年9月上线，是一个专注年轻人音乐短视频社区平台。用户可以通过这款软件选择歌曲，拍摄音乐短视频，形成自己的作品。',
          logo:'https://i0.hdslb.com/bfs/article/4cb82c88eec3be3af400ed6c1bcc49d0d3938de8.jpg@1144w_1050h.webp',
          toPath:''
        },
        {
          id:2,
          name:'Peta 上海耐威克宠物用品有限公司',
          info:'耐威克作为宠物时尚生活的倡导品牌,以“生活因宠物更精彩”为品牌核心理念,一直致力于帮助宠物保持自身的健康美丽与寿命延长。',
          logo:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1570971431008&di=d85c5d56704d14667799bc15cc0012b7&imgtype=0&src=http%3A%2F%2Fku.90sjimg.com%2Felement_origin_min_pic%2F17%2F08%2F25%2F0e824887823c6033703fd7667d5c8d33.jpg%2521%2Ffwfh%2F804x670%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue',
          toPath:''
        },
        {
          id:3,
          name:'昵图网',
          info:'这是一段介绍',
          logo:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1570971809609&di=98a5e50432d3b30719a282b817f0af25&imgtype=0&src=http%3A%2F%2Fpic37.nipic.com%2F20140116%2F3347542_165523506000_2.jpg',
          toPath:''
        },
      ],
    }
  },
  methods:{
    goTo:function(Path){
      this.$router.replace(Path);
    },
    beChick:function(type){
      if(type == 1){
        this.$refs.obj.prev();
      }else this.$refs.obj.next();
    }
  },
  components:{
    Search
  }
}
</script>


<style scoped>
#home{
  overflow: auto;
  position: relative;;

}
div,span{
  display: block;
}
span{
  text-align: center;
  display: block;
}

.home_title{
  height: 50px;
  width: 100%;
  position:fixed;
  z-index: 500;
  background: rgba(252, 251, 251,0.7);
  border-bottom-left-radius:50%;
  border-bottom-right-radius: 50%; 
}
.advCard{
  height: 150px;
  width: 95%;
  margin:0 auto;
}
.home_guide{
  display: block;
  height: 75px;
  width: 100%;
  margin: 10px 0;
}
.home_guide ._box{
  padding-top:10px;
  width: 95%;
  margin: 0 auto;
}
.objCard{
  height: 220px;
  width: 100%;
  overflow: hidden;
  position: relative;
  
}
.objCard ._box{
  top:40px;
  position: relative;
  width: 270%;
  height: 150px;
  margin: 0 auto;
  right: 85%;
  z-index: -1;
  float: none;
}
.advList{
  top:30px;
  position: relative;
  width:90%;
  margin: 0 auto;
}
/*advList部分组件css*/
  .advList ._cardBox{
    width: 100%;
    height: 80px;
    margin:5px 0;
    background: #f5f5f5;
  }
  .advList ._logo{
    height: 80px;
    width: 80px;
    position: relative;
    float: left;
  }
  .advList ._logo img{
    margin:5% 5%;
    width: 90%;
    height: 90%;
    object-fit: cover;
    position: relative;
  } 
  .advList ._name{
    height: 20px;
    width: 240px;
    text-align: left;
    position: relative;
    float: left;
    overflow: hidden;
    font-size:16px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
  .advList ._info{
    height: 60px;
    width: 240px;   /*适应手机端时许进行相对单位更改 */
    float: left;
    position: relative;
    text-align: left;
    overflow: hidden;
    text-indent:25px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    font-size: 14px;
  }
/*home_title*/
  .home_title ._txt{
    text-align:left;
    font-weight: 800;
    font-size: 30px;
    width: 90%;
    margin: 5px  auto auto 15px;
    position: absolute;
    color: rgb(73, 73, 73);
  }
  .home_title ._icon{
    height: 50px;
    width: 50px;
    position: absolute;
    right: 0;
    font-size:40px; 
    color:#666;
  }
 
/*home_guide部分设置css*/
  .home_guide ul{
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
  }
  .home_guide li{
    width:25%;
    
    background: #fff;
    display: block;
    float: left;
  }
  .home_guide ._icon{
    height: 60px;
    width: 40px;
    margin: 0 auto;
    position: relative;
  }
  .home_guide ._iconSet{
    height: 40px;
    width: 40px;
  }
  .home_guide span{
    color:#666;
  }
  .home_guide ._txt{
    height: 20px;
  }
/*span_button部分组件css*/
  .objCard ._button{
    top:40px;
    display: block;
    height: 180px;
    width: 30px;
    position: absolute;
    background:rgba(0.1,0.1,0.1,0);
    float: none;
  }

  .objCard ._b2{
    right: 0;
  }
  .objCard ._txt{
    display: block;
    float: none;
    position:absolute;
    margin-left: 10px;
    font-weight: 800;
    font-size: 20px;
    color:rgb(51, 51, 51);
  }
/*card部分组件css*/
  ._cardBox{
    height: 100%;
    background:  #99a9bf;
    border-radius:9px;
    z-index: -1;
    overflow: hidden;
  }

  .objCard ._cardBox{
    height:90%;
    width:60%;
    margin:0 auto;
  }
  ._detail{
    display: block;
    height: 100%;
    width: 100%;
    z-index: 500;
  }
  ._detail p{
    z-index: 800;
    position:absolute;
  }
  ._detail img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
  }
  
/*Swaper部分组件css*/ 
  .advCard .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .advCard .el-carousel__item:nth-child(2n) {
     background-color: #fff;
  }
  
  .advCard .el-carousel__item:nth-child(2n+1) {
     background-color: #fff;
  } 

  .objCard .el-carousel__item h3 {
    color:  #99a9bf;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  
  .objCard .el-carousel__item:nth-child(2n) {
    background-color:rgba(0, 0, 0, 0);
  }
  
  .objCard .el-carousel__item:nth-child(2n+1) {
    background-color:rgba(0, 0, 0, 0);
  }


</style>
